<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        height: 3000px;
      }

      .aside {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .item {
        height: 40px;
        line-height: 40px;
        text-align: center;
        padding: 0 10px;
        cursor: pointer;
      }

      .active {
        background-color: red;
        color: #fff;
      }

      .content {
        width: 660px;
        margin: 400px auto;
      }

      .neirong {
        height: 300px;
        margin-bottom: 20px;
        color: #fff;
      }

      .content1 {
        background-color: red;
      }

      .content2 {
        background-color: blue;
      }

      .content3 {
        background-color: orange;
      }

      .content4 {
        background-color: yellowgreen;
      }
    </style>
  </head>

  <body>
    <div class="aside">
      <div class="item active" data-id="0">男装/女装</div>
      <div class="item" data-id="1">儿童服装/游乐园</div>
      <div class="item" data-id="2">电子产品</div>
      <div class="item" data-id="3">电影/美食</div>
    </div>

    <div class="content">
      <div class="neirong content1">男装/女装</div>
      <div class="neirong content2">儿童服装/游乐园</div>
      <div class="neirong content3">电子产品</div>
      <div class="neirong content4">电影/美食</div>
    </div>

    <script>
      ;(function () {
        // 获取元素
        // 给window添加滚动事件
        window.addEventListener('scroll', function () {
          // 获取html滚动距离
          const n = document.documentElement.offsetTop
        })

        const items = document.querySelectorAll('.aside .item')
        // console.log(items);
        // 获取每个模块的滚动距离
        const content = document.querySelectorAll('.neirong')
        // console.log(content[2].offsetTop)
        // 给导航栏加点击事件
        const nav = document.querySelector('.aside')

        // 使用事件委托
        nav.addEventListener('click', function (e) {
          if (e.target.tagName === 'DIV') {
            document.querySelector('.aside .active').classList.remove('active')
            e.target.classList.add('active')
            // 获取自定义的类名内容，充当索引
            let i = e.target.dataset.id
            document.documentElement.scrollTop = content[i].offsetTop
            // console.log(`content${i}`);
          }
        })

        // 使用for循环
        for (let i = 0; i < items.length; i++) {
          items[i].addEventListener('click', function () {
            document.querySelector('.aside .active').classList.remove('active')
            this.classList.add('active')
            document.documentElement.scrollTop = content[i].offsetTop
            // console.log(`content${i}`)
          })
        }
      })()


      ;(function () {
        const content1 = document.querySelector('.content1').offsetTop
        const content2 = document.querySelector('.content2').offsetTop
        const content3 = document.querySelector('.content3').offsetTop
        const content4 = document.querySelector('.content4').offsetTop
        // console.log(content4);
        window.addEventListener('scroll', function () {
          const old = document.querySelector('.aside .active')
          if (old) {
            old.classList.remove('active')
          }
          let n = document.querySelector('html').scrollTop
          // console.log(n);
          if (n >= content1 && n < content2) {
            document.querySelector('[data-id="0"]').classList.add('active')
            // console.log(document.querySelector('[data-id="0"]'));
          } else if (n >= content2 && n < content3) {
            document.querySelector('[data-id="1"]').classList.add('active')
          } else if (n >= content3 && n < content4) {
            document.querySelector('[data-id="2"]').classList.add('active')
          } else if (n >= content4) {
            document.querySelector('[data-id="3"]').classList.add('active')
          }
        })
      })()
    </script>
  </body>
</html>
